<script lang="ts" setup>
import { articledata } from '@/assets/articledata'
import { useRoute } from 'vue-router'
import AOS from 'aos'
import 'aos/dist/aos.css'

// 在组件挂载时初始化AOS
onMounted(() => {
  AOS.init()
})

const route = useRoute()

// 获取id
const itemId = route.params.id

// 根据id获取数据
const currentData = articledata.find((event) => event.id === Number(itemId))

console.log(currentData, '传递过来的数据')
</script>

<template>
  <div class="article">
    <div
      class="article-title"
      data-aos="fade-down"
      data-aos-easing="linear"
      data-aos-duration="500"
    >
      <h1 class="article-title-text">{{ currentData?.title }}</h1>
      <p class="article-title-p">{{ currentData?.release }}</p>
    </div>
    <div
      class="article-image"
      data-aos="fade-zoom-in"
      data-aos-easing="ease-in-back"
      data-aos-delay="300"
      data-aos-offset="0"
    >
      <a-image v-for="(image, index) in currentData?.images" :key="index" :src="image"></a-image>
    </div>
    <p class="article-p" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
      {{ currentData?.content }}
    </p>
  </div>
</template>

<style lang="scss" scoped>
.article {
  width: 100%;
  margin: 50px 20px 20px 20px;
  &-title {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &-text {
      font-size: 40px;
    }
    &-p {
      font-size: 15px;
    }
  }
  &-image {
    display: flex; /* 使用弹性布局 */
    justify-content: space-between; /* 图片之间留有间距 */
    gap: 20px; /* 设置图片之间的间隙 */
    margin: 20px 0;

    a-image {
      flex: 1; /* 每个图片平分宽度 */
      max-width: calc(25% - 10px); /* 确保两张图片占满一行 */
      border-radius: 8px; /* 可选：添加圆角 */
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    }
  }
  &-p {
    font-size: 18px;
    text-indent: 2em; /* 给每段文字添加首行缩进 */
  }
}
</style>
